<!DOCTYPE html>
<html>
    <head>
        <title>国际舆论分析</title>
        <meta charset="UTF-8">
        <style>
            /* 基础样式 */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            body {
                padding-top: 80px; /* 为固定导航栏腾出空间 */
            }

            /* 使用flex 来横向显示*/
            .navbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 0;
            }
            
            /* 导航链接样式 - 新增 */
            .nav-links {
                display: flex;
                list-style: none;
            }
            
            .nav-links li {
                margin: 0 15px;
            }
            
            .nav-links a {
                color: white;
                text-decoration: none;
                font-weight: 500;
                transition: color 0.3s ease;
                padding: 10px 0;
            }
            
            .nav-links a:hover {
                color: #3498db;
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }
            
            /* 导航栏 */
            header {
                background-color: #2c3e50;
                color: white;
                position: fixed;
                width: 100%;
                top: 0;
                z-index: 1000;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
            
            /* 内容区域样式 - 新增 */
            section {
                padding: 40px 0;
                min-height: 400px;
            }
            
            section:nth-child(odd) {
                background-color: #f9f9f9;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="container">
                <nav class="navbar">
                    <ul class="nav-links">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">关于</a></li>
                        <li><a href="#">测试</a></li>
                        <li><a href="#">测试</a></li>
                        <li><a href="#">测试</a></li>
                        <li><a href="#">联系</a></li>
                    </ul>
                    <div>
                        <h1>
                            国际舆论分析
                        </h1>
                    </div>
                </nav>
            </div>
        </header>
        
        <section>
            <div class="container">
                <h1>国际舆论分析</h1>
                <p>欢迎访问我们的国际舆论分析平台，这里提供最新的全球舆论趋势和深度分析。</p>
            </div>
        </section>
        
        <section>
            <div class="container">
                <h1>最新分析报告</h1>
                <p>我们的专业团队持续监测和分析全球舆论动态，为您提供精准的洞察。</p>
            </div>

        </section>
            <div class="container">
                <h1>实时热点查看</h1>
                <p>在这里你不会错过世界上任何政治热点新闻</p>
            </div>
        <section>

        </section>
        <script>
            // 可以添加交互功能
            document.addEventListener('DOMContentLoaded', function() {
                console.log('页面加载完成');
            });
        </script>
    </body>
</html>